<template>
	<view class="userContent">
		<view class="userTop">
			<view class="backBg">
				<view class="backImg" @click="toBack"></view>
			</view>
			<view class="blackBg"></view>
			<view class="userBg">
				<view class="t">
					<view class="headContent" :style="{'background-image': 'url(' + headerUrl + ')'}">
						<view class="hyIcon">
							{{userObject.user_info.order_id_text || userObject.user_info.order_member && userObject.user_info.order_member.member_name}}
						</view>
					</view>
					<view 
						class="gz wgz" 
						@click="goGz()"
						v-if="!userObject.user_info.user_fans_to_user_id || !(userObject.user_info.user_fans_to_user_id && userObject.user_info.user_fans_to_user_id.to_user_id)">
						关注
					</view>
					
					<view
						class="gz ygz" 
						@click="goQxgz()"
						v-else-if="(userObject.user_info.user_fans_to_user_id && userObject.user_info.user_fans_to_user_id.to_user_id) && (userObject.user_info.user_fans_user_id && userObject.user_info.user_fans_user_id.user_id)">
						互相关注
						
					</view>
					
					<view
						class="gz ygz" 
						@click="goQxgz()"
						v-else-if="userObject.user_info.user_fans_to_user_id || (userObject.user_info.user_fans_to_user_id && userObject.user_info.user_fans_to_user_id.to_user_id)">
						已关注
					</view>
					
					<view class="sx" 
						@click="goSx(userObject)" 
						v-show="(userObject.user_info.user_fans_to_user_id && userObject.user_info.user_fans_to_user_id.to_user_id) && (userObject.user_info.user_fans_user_id && userObject.user_info.user_fans_user_id.user_id)">
						私信
					</view>
				</view>
				<view class="n">
					<view class="name">{{userObject.user_info.nickname}}</view>
					<view class="id">用户ID{{userObject.user_info.user_id}}</view>
				</view>
			</view>
		</view>
		<UserInfo :userInfoObject="userObject.user_info"></UserInfo>
	</view>
</template>

<script>
	import UserInfo from './compontents/userInfo.vue'
	import {apiGetView, apiGetUserWorl} from '../../../api/me.js'
	import { apiPostGz , apiPostQXGz} from '../../../api/globSearch.js'
	export default {
		components: {
			UserInfo
		},
		data() {
			return {
				userObject: {
					user_info: {}
				},
				headerUrl: '../../../static/home/default_user.png',
				userId: ''
			}
		},
		onLoad(id) {
			var self = this
			self.userId = id.userId
			self.getUSerInfo(id.userId)
		},
		onBackPress(e) {
			var self = this
			self.$store.dispatch('gz/goFlash', true)
		},
		methods: {
			toBack() {
				uni.navigateBack({
					data: 1
				})
			},
			
			// 获取信息
			getUSerInfo(id) {
				var self = this
				apiGetView({
					id: id
				}).then(r => {
					if(r.status == 0){
						self.userObject = r.data
						// 设置一下用户头像
						if (self.userObject.upload_avatar && self.userObject.upload_avatar.path_text) {
							self.headerUrl = self.userObject.upload_avatar.path_text
						}
					}
				})
			},
			// 点击去关注
			goGz() {
				var self = this
				apiPostGz({
					to_user_id: self.userId
				}).then(r => {
					if (r.status == 0) {
						uni.showToast({
							title:'关注成功',
							icon:'success'
						})
						self.getUSerInfo(self.userId)
						self.$store.dispatch('home/changeFocusStatus')
					}
				})
			},
			// 点击取消关注
			goQxgz() {
				var self = this
				apiPostQXGz({
					to_user_id: self.userId
				}).then(r => {
					if (r.status == 0) {
						uni.showToast({
							title:'取消成功',
							icon:'success'
						})
						self.getUSerInfo(self.userId)
						self.$store.dispatch('home/changeFocusStatus')
					}
				})
			},
			// 跳转私信
			goSx(item) {
				uni.navigateTo({
					url: '/pages/message/chatRoom?userName=' + item.user_info.nickname + '&id=' + item.user_info.user_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userContent {
		width: 100%;
		height: auto;
		.userTop {
				width: 100%;
				height: 520rpx;
				position: relative;
				.backBg {
					width: 100%;
					background-color: #1C1B2B;
					height: 200rpx;
					position: relative;
					.backImg {
						width: 80rpx;
						height: 80rpx;
						border-radius: 40rpx;
						background-image: url(icon/backIcon.png);
						background-position: center;
						background-size: 60rpx;
						background-repeat: no-repeat;
						position: absolute;
						left: 3%;
						top: 32rpx;
					}
				}
		}
		
		.blackBg {
			width: 90%;
			height: 320rpx;
			border-bottom: solid 1rpx #1C1B2B;
			margin-left: 5%;
		}
		
		.userBg {
			position: absolute;
			top: 170rpx;
			width: 100%;
			
			.t {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 90%;
				margin-left: 4%;
				.headContent {
					width: 180rpx;
					height: 180rpx;
					border-radius: 100%;
					background-size: 180rpx 180rpx;
					background-repeat: no-repeat;
					display: flex;
					justify-content: center;
					align-items: flex-end;
					.hyIcon {
							width: 160rpx;
							height: 32rpx;
							border-radius: 18rpx;
							background-color: #434254;
							color: white;
							font-size: 24rpx;
							text-align: center;
					}
				}
				// .gz {
				// 	width: 240rpx;
				// 	height: 80rpx;
				// 	margin-left: 20rpx;
				// 	background-image: url(icon/gz.png);
				// 	background-size: 76%;
				// 	background-repeat: no-repeat;
				// }
				
				.gz {
					margin-left: 40rpx;
					width: 200rpx;
					height: 80rpx;
				}
				
				.wgz {
					background-image: url(icon/bg.png);
					background-size: 100%;
					font-size: 0;
					background-position: center;
					line-height: 80rpx;
					font-size: 24rpx;
					text-align: center;
				}
				
				.ygz {
					text-align: center;
					line-height: 80rpx;
					font-size: 24rpx;
					border-radius: 6rpx;
					background-color: #434254;
				}
				
				.sx {
					margin-left: 40rpx;
					width: 180rpx;
					height: 80rpx;
					text-align: center;
					padding-left: 20rpx;
					line-height: 80rpx;
					font-size: 24rpx;
					border-radius: 6rpx;
					background-color: #434254;
					background-image: url(icon/sx.png);
					background-size: 38rpx 28rpx;
					background-position: 30rpx center;
					background-repeat: no-repeat;
				}
			}
			
			.n {
				width: 90%;
				margin-left: 4%;
				margin-top: 40rpx;
				.name {
					font-size: 44rpx;
				}
				.id {
					color: #DDDBFB;
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
